<template>
    <span>
        <Button icon="ios-notifications" type="text" size="large" @click="new_alarm_show = true"></Button>
        <Drawer title="新的告警" :closable="true" v-model="new_alarm_show" :width="400" @on-visible-change="handleNewAlarmShowChange" >
            <List border>
                <ListItem v-for="(item) in new_alarm_records" :key="item">
                    <ListItemMeta :title="item.alarm_time" :description="item.alarm_content"></ListItemMeta>
                    <template #action>
                        <AlarmRecordReadButton :data="item" />
                    </template>
                </ListItem>
            </List>
            <p style="color:#aaa;padding:10px;">仅记录最新的 20 条告警信息，更多告警信息请在告警管理中查看</p>
        </Drawer>
    </span>
</template>

<script>
import AlarmRecordReadButton from './AlarmRecordReadButton.vue';

export default {
    name: 'NewAlarmButton',
    components: {
        AlarmRecordReadButton,
    },
    data() {
        return {
            new_alarm_show: false,
            new_alarm_records: [],
        }
    },
    methods: {
        handleNewAlarmShowChange(show) {
            if(show) {
                this.$Notice.close('new_alarm');
            }
        },
        handleGetNewAlarmRecords() {
            this.$http.post('/get_new_alarm_records', {
                min_alarm_id: this.new_alarm_records.length > 0 ? this.new_alarm_records[0].alarm_id : 0
            }).then((res) => {
                let data = res.data;
                if(data.length == 0) {
                    return;
                }
                let unread_alarm_count = 0;
                for(let i = 0; i < data.length; i++) {
                    if (data[i].alarm_read == 1) continue;
                    unread_alarm_count++;
                }
                if (unread_alarm_count > 0) {
                    this.$Notice.close('new_alarm');
                    this.$Notice.info({
                        title: '有新的告警',
                        name: 'new_alarm',
                        render: (h) => {
                            return h('a', {
                                style: {
                                    color: '#2d8cf0',
                                    cursor: 'pointer'
                                },
                                onclick: () => {
                                    this.$Notice.close('new_alarm');
                                    this.new_alarm_show = true;
                                }
                            }, '收到了新的告警，点击查看');
                        },
                        duration: 0
                    });
                }
                // this.$nextTick(() => {
                //     document.getElementById('new_alarm_notice').onclick = () => {
                //         this.$Notice.close('new_alarm');
                //         this.new_alarm_show = true;
                //     }
                // });
                for(let i = 0; i < data.length; i++) {
                    if (data[i].alarm_read == 1) continue; // 如果已经标记为已读，则不显示
                    this.$Notice.warning({
                        desc: `[${data[i].alarm_time}] ${data[i].alarm_content}`,
                    });
                }
                for(let i = 0; i < this.new_alarm_records.length; i++) {
                    if(data.length >= 20) { // 只保留最新的20条记录
                        break;
                    }
                    data.push(this.new_alarm_records[i]);
                }
                this.new_alarm_records = data;
            })
        },
            
    },
    created() {
        let temp = setInterval(() => {
            let token = localStorage.getItem('token');
            if (token == null) {
                clearInterval(temp);
                return;
            }
            this.handleGetNewAlarmRecords();
        }, 10000); // 每10秒获取一次新告警记录
    }
}
</script>